<template>
  <div class="dashboard-wrap">
    <!--数据总览部分-->
    <div class="dsd-overview">
      <div class="dsd-overview-title">数据总览</div>
      <div class="dsd-overview-row">
        <div class="dsd-overview-row-card" :style="overviewCardStyle.todayAmount">
          <div class="dsd-overview-row-card-label">昨日预估收益</div>
          <div class="dsd-overview-row-card-data">
            {{ tcrParseAmount(incomeData.todayAmount) }}
            <span>元</span>
          </div>
        </div>
        <div class="dsd-overview-row-card" :style="overviewCardStyle.withdrawAmount">
          <div class="dsd-overview-row-card-label">可提现金额</div>
          <div class="dsd-overview-row-card-data">
            {{ tcrParseAmount(incomeData.withdrawPrice) }}
            <span>元</span>
          </div>
        </div>
        <div class="dsd-overview-row-card" :style="overviewCardStyle.totalAmount">
          <div class="dsd-overview-row-card-label">总收益</div>
          <div class="dsd-overview-row-card-data">
            {{ tcrParseAmount(incomeData.totalAmount) }}
            <span>元</span>
          </div>
        </div>
        <div class="dsd-overview-row-card" :style="overviewCardStyle.todayCount">
          <div class="dsd-overview-row-card-label">昨日激活量</div>
          <div class="dsd-overview-row-card-data">
            {{ tcrParseInt(incomeData.todayCount) }}
            <span>次</span>
          </div>
        </div>
        <div class="dsd-overview-row-card" :style="overviewCardStyle.totalCount">
          <div class="dsd-overview-row-card-label">总激活量</div>
          <div class="dsd-overview-row-card-data">
            {{ tcrParseInt(incomeData.totalCount) }}
            <span>次</span>
          </div>
        </div>
      </div>
    </div>
    <!--数据明细部分-->
    <div class="dsd-det">
      <div class="dsd-det-title">资源分布</div>
      <div class="dsd-det-query">
        <el-date-picker
          v-model="queryParam.dateArr"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button @click="queryAuthData" style="margin-left: 10px;">查询</el-button>
      </div>
      <div class="dsd-det-data">
        <div class="dsd-det-data-chart">
          <PieChart v-if="tableData && tableData.length > 0" :chart-data="tableData"/>
        </div>
        <div class="dsd-det-data-table">
          <el-table
            :data="tableData"
            height="450px"
            style="width: 100%">
            <el-table-column prop="sourceName" label="资源名"></el-table-column>
            <el-table-column prop="activeCount" label="激活量"></el-table-column>
            <el-table-column prop="rate" label="占比">
              <template slot-scope="scope">
                {{ parseToPercent(scope.row.rate) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PieChart from './dashboard/PieChart';
import {getCompanyIncome, getSourcePieList} from '@/api/net/crmReport';


export default {
  name: 'Index',
  components: {
    PieChart,
  },
  data() {
    return {
      queryParam: {
        dateArr: [],
      },
      overviewCardStyle: {
        todayAmount: {
          background: 'rgb(234,249,246)',
          borderTop: '4px solid rgba(0, 191, 139, 1)'
        },
        withdrawAmount: {
          background: 'rgb(248,237,255)',
          borderTop: '4px solid rgba(156,29,250, 1)'
        },
        totalAmount: {
          background: 'rgb(237,243,255)',
          borderTop: '4px solid rgba(49, 126, 242, 1)'
        },
        todayCount: {
          background: 'rgba(254, 246, 231, 1)',
          borderTop: '4px solid rgba(250, 178, 0, 1)'
        },
        totalCount: {
          background: 'rgba(242, 240, 252, 1)',
          borderTop: '4px solid rgba(126, 93, 242, 1)'
        }
      },
      incomeData: {},
      tableData: [],
    }
  },
  created() {
    this.loadIncomeData();
    this.loadPieChartData();
  },
  methods: {
    loadIncomeData () {
      getCompanyIncome().then(res => {
        if (res.code === 200) {
          this.incomeData = res.data || {};
        }
      });
    },
    loadPieChartData(param) {
      getSourcePieList(param).then(res => {
        if (res.code === 200) {
          this.tableData = res.data || [];
          if (this.tableData && this.tableData.length > 0) {
            let total = 0;
            this.tableData.forEach(x => {
              total = total + x.activeCount;
            });
            this.tableData.forEach(x => {
              x.rate = Number(x.activeCount / total).toFixed(2);
              x.name = x.sourceName;
              x.value = x.activeCount;
            });
          }
        }
      })
    },
    queryAuthData() {
      const queryData = {};
      if (this.queryParam.dateArr && this.queryParam.dateArr.length > 0) {
        queryData.startDate = this.queryParam.dateArr[0];
        queryData.endDate = this.queryParam.dateArr[1];
      }
      this.loadPieChartData(queryData);
    },
    parseToPercent(rate) {
      let res = '';
      if (!rate) {
        return '0%'
      }
      if (typeof rate === 'number') {
        res = (rate * 100) + '%'
      } else if (typeof rate === 'string') {
        let rateNum = Number(rate) * 100;
        res = rateNum + '%';
      } else {
        res = '0%';
      }
      return res;
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-wrap {
  padding: 32px;
  background-color: #ffffff;
  position: relative;

  .dsd-overview {

    &-title {
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 1px;
      line-height: 24px;
      color: rgba(17, 53, 69, 1);
    }

    &-row {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 20px;

      &-card {
        height: 150px;
        background: rgba(234, 249, 246, 1);
        border-top: 4px solid rgba(0, 191, 139, 1);
        margin-right: 20px;
        flex: 1;

        &-label {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 1px;
          line-height: 21px;
          color: rgba(17, 53, 69, 1);
          margin: 26px 0 0 15px;

        }

        &-data {
          font-size: 30px;
          font-weight: 700;
          letter-spacing: 1px;
          line-height: 43px;
          color: rgba(17, 53, 69, 1);
          margin: 26px 0 0 15px;

          > span {
            font-size: 12px;
            font-weight: 400;
            line-height: 18px;
            color: rgba(153, 153, 153, 1);
          }
        }
      }

      &-card:last-child {
        margin-right: 0;
      }
    }

  }

  .dsd-det {
    margin-top: 20px;

    &-title {
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 1px;
      line-height: 24px;
      color: rgba(17, 53, 69, 1);
    }

    &-query {
      margin-top: 10px;
    }

    &-data {
      display: flex;
      align-items: center;
      margin-top: 20px;

      &-chart {
        width: 40%;
        height: 450px;
      }

      &-table {
        margin-left: 20px;
        width: 60%;
      }

    }
  }
}
</style>
